@import "../tab-list/tab-list.component.less";
@import (reference) "../shared/common";
:host {
  .display-flex;
}

@height-tab: 30px;
.combo-chart-wrapper {
  // height: 100%;
  .display-flex;
  .flex;
  background-color: @color-white;
  padding: 0 @space-common @space-common @space-common;
  .chart-wrapper {
    .display-flex;
    .flex;
  }
  quote-chart {
    .display-flex;
    .flex;
  }
  .tab-list {
    float: right;
  }
  .tab-list-primary {
    .cm-tab-list {
      height: @height-tab;
      .tab-list-item {
        .tab-list-link {
          width: 40px;
          height: 20px;
          padding: 0;
          margin: 0 2px;
          border-radius: 4px;
          font-size: 1.2rem;
          line-height: 20px;
        }
      }
    }
  }
  .combo-chart-header {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    justify-content: space-between;
    -ms-flex-direction: row;
    .chart-header {
      font-size: 1.4rem;
      margin: 0;
      line-height: @height-tab;
    }
    &.with-hr {
      margin-left: -10px;
      margin-right: -10px;
      border-bottom: 1px solid @color-gray-main;
    }
    &.with-bg {
      background-color: @color-gray-view-background;
    }
  }
  .combo-chart-header.menu-left {
    justify-content: flex-start;
    .tab-list-primary .cm-tab-list .tab-list-item .tab-list-link {
      margin: 0 10px;
    }
  }
}

combo-chart {
  &,
  .combo-chart-wrapper {
    .display-flex;
    .flex;
  }
}

// 行情板块的K线图
.block-mini-chart {
  .combo-chart-wrapper {
    padding: 0;
    padding-bottom: @space-common;
    border: 1px solid @color-gray-main;
    .combo-chart-header {
      font-size: 1.4rem;
      border-bottom: 1px solid @color-gray-main;
      padding: 0 @space-common;
    }
    .chart-wrapper {
      height: calc(100% - 30px);
      height: -webkit-calc(100% - 30px);
      height: -moz-calc(100% - 30px);
      padding: @space-common @space-common 0 0;
    }
    .quote-chart {
      width: 100%;
      margin: 0;
      border: 0;
    }
  }
}

// 模拟交易的K线图
.combo-chart-wrapper.vtrade-wrapper {
  padding: 0;
  border-bottom: 1px solid #EEE;
  .chart-wrapper {
    height: calc(100% - 30px);
    height: -webkit-calc(100% - 30px);
    height: -moz-calc(100% - 30px);
    padding: 4px @space-common 0 0;
  }
}

.no-side-border {
  .combo-chart-wrapper {
    border-left-width: 0;
    border-right-width: 0;
  }
}